<template>
  <div class="shimap" v-show="!isQuxian">
    <div class="biaoti">廊坊市{{$store.state.YEAR}}年监督数据</div>
    <div id="map"></div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getMap } from "@/api/gaikuang.js";

export default {
  name: "LangFangMap",
  data() {
    return {
      isQuxian: false
    };
  },
  methods: {
    async dramMap(num = "131000", isQuxian = false) {
      this.lf_map = null;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("map"));
      this.lf_map = myChart;

      let mapData = await getMap({ code: num, isQuxian: isQuxian });

      this.$echarts.registerMap("langfang", mapData.data);
      var option = {
        geo: {
          map: "langfang",
          zoom: 1.2,
          itemStyle: {
            areaColor: "#00D8FF",
            borderColor: "#fff",
            borderWidth: 2
          },
          label: {
            normal: {
              color: "#fff",
              show: true,
              position: "inner",
              fontSize: isQuxian ? 20 : 16
            }
          },

          regions: [
            //对不同的区块进行着色
            {
              name: "三河市", //区块名称
              itemStyle: {
                areaColor: "#605bd3"
              }
            },
            {
              name: "大厂回族自治县",
              itemStyle: {
                normal: {
                  areaColor: "#cf5eb6"
                }
              }
            },
            {
              name: "香河县",
              itemStyle: {
                normal: {
                  areaColor: "#9f7a7a"
                }
              }
            },
            {
              name: "安次区",
              itemStyle: {
                normal: {
                  areaColor: "#4986fb"
                }
              }
            },
            {
              name: "霸州市", //区块名称
              itemStyle: {
                areaColor: "#4ca98c"
              }
            },
            {
              name: "大城县",
              itemStyle: {
                normal: {
                  areaColor: "#00cbff"
                }
              }
            },
            {
              name: "文安县",
              itemStyle: {
                normal: {
                  areaColor: "#e5747a"
                }
              }
            },
            {
              name: "永清县",
              itemStyle: {
                normal: {
                  areaColor: "#70c55d"
                }
              }
            },
            {
              name: "固安县",
              itemStyle: {
                areaColor: "#f7c437"
              }
            },
            {
              name: "广阳区",
              itemStyle: {
                normal: {
                  areaColor: "#ee7c36"
                }
              }
            }
          ]
        },
        emphasis: {
          show: true,
          itemStyle: {
            borderColor: "green"
          }
        }
      };
      myChart.setOption(option);
      let areaCode = [
        {
          name: "大城县",
          code: "131025"
        },
        {
          name: "文安县",
          code: "131026"
        },
        {
          name: "霸州市",
          code: "131081"
        },
        {
          name: "固安县",
          code: "131022"
        },
        {
          name: "永清县",
          code: "131023"
        },
        {
          name: "安次区",
          code: "131002"
        },
        {
          name: "广阳区",
          code: "131003"
        },
        {
          name: "香河县",
          code: "131024"
        },
        {
          name: "大厂回族自治县",
          code: "131028"
        },
        {
          name: "三河市",
          code: "131082"
        }
      ];

      myChart.off("click");
      myChart.on("click", params => {
        let AreaItem = areaCode.find(item => item.name === params.name);
        if (AreaItem) {
          Bus.$emit("isQuxian", true);
          Bus.$emit("AreaItem", AreaItem);
        }
      });
    }
  },
  mounted() {
    this.dramMap();
  },
  created() {
    Bus.$on("changeSize", e => {
      this.lf_map.resize();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
      if (window._cancel) {
        window._cancel.forEach((item, index) => {
          item.cancel("中断请求");
          delete window._cancel[index];
        });
      }
    });
  }
};
</script>

<style scoped lang="less">
.shimap {
  border: 0.0625rem solid #2c4daa;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  #map {
    width: 100%;
    height: calc(100% - 3.125rem);
  }
}
</style>